<template>
  <div class="packaging-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>包装</span>
          <el-button type="primary" @click="handleCreatePackage"
            >新建包装</el-button
          >
        </div>
      </template>

      <el-steps :active="activeStep" finish-status="success" class="steps">
        <el-step title="选择物料" />
        <el-step title="扫描/输入" />
        <el-step title="确认包装" />
      </el-steps>

      <!-- 步骤1：选择物料 -->
      <div v-if="activeStep === 0" class="step-content">
        <el-form :model="packageForm" label-width="100px">
          <el-form-item label="包装类型">
            <el-select v-model="packageForm.type" placeholder="请选择包装类型">
              <el-option label="箱装" value="box" />
              <el-option label="托盘" value="pallet" />
              <el-option label="捆包" value="bundle" />
            </el-select>
          </el-form-item>
          <el-form-item label="物料编码">
            <el-input
              v-model="packageForm.materialCode"
              placeholder="请输入物料编码"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="nextStep">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤2：扫描/输入 -->
      <div v-if="activeStep === 1" class="step-content">
        <el-form :model="packageForm" label-width="100px">
          <el-form-item label="包装数量">
            <el-input-number v-model="packageForm.quantity" :min="1" />
          </el-form-item>
          <el-form-item label="序列号">
            <el-input
              v-model="packageForm.serialNo"
              placeholder="请扫描或输入序列号"
            />
            <el-button type="primary" @click="handleAddSerial">添加</el-button>
          </el-form-item>
          <el-table :data="packageForm.serials" border style="width: 100%">
            <el-table-column prop="serialNo" label="序列号" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button
                  link
                  type="danger"
                  @click="removeSerial(scope.$index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-form-item>
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="nextStep">下一步</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 步骤3：确认包装 -->
      <div v-if="activeStep === 2" class="step-content">
        <el-descriptions title="包装信息" :column="2" border>
          <el-descriptions-item label="包装类型">{{
            packageForm.type
          }}</el-descriptions-item>
          <el-descriptions-item label="物料编码">{{
            packageForm.materialCode
          }}</el-descriptions-item>
          <el-descriptions-item label="包装数量">{{
            packageForm.quantity
          }}</el-descriptions-item>
          <el-descriptions-item label="序列号数量">{{
            packageForm.serials.length
          }}</el-descriptions-item>
        </el-descriptions>

        <div class="confirm-buttons">
          <el-button @click="prevStep">上一步</el-button>
          <el-button type="primary" @click="handleConfirm">确认包装</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

const activeStep = ref(0);
const packageForm = reactive({
  type: "",
  materialCode: "",
  quantity: 1,
  serialNo: "",
  serials: [],
});

const nextStep = () => {
  if (activeStep.value < 2) {
    activeStep.value++;
  }
};

const prevStep = () => {
  if (activeStep.value > 0) {
    activeStep.value--;
  }
};

const handleCreatePackage = () => {
  activeStep.value = 0;
  Object.assign(packageForm, {
    type: "",
    materialCode: "",
    quantity: 1,
    serialNo: "",
    serials: [],
  });
};

const handleAddSerial = () => {
  if (!packageForm.serialNo) {
    ElMessage.warning("请输入序列号");
    return;
  }
  if (
    packageForm.serials.some((item) => item.serialNo === packageForm.serialNo)
  ) {
    ElMessage.warning("序列号已存在");
    return;
  }
  packageForm.serials.push({ serialNo: packageForm.serialNo });
  packageForm.serialNo = "";
};

const removeSerial = (index) => {
  packageForm.serials.splice(index, 1);
};

const handleConfirm = () => {
  ElMessage.success("包装完成");
  handleCreatePackage();
};
</script>

<style scoped>
.packaging-container {
  padding: 20px;
}

.steps {
  margin: 20px 0 40px;
}

.step-content {
  max-width: 800px;
  margin: 0 auto;
}

.confirm-buttons {
  margin-top: 20px;
  text-align: center;
}
</style>
